<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>读者管理</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <style>
        .main{
            width:100%;
            height:100%;
            /* background:red;*/
            display:flex;
            flex-wrap: wrap;
            flex-direction:row;
            justify-content: start;
        }
        .query-div{
            display:flex;
            flex-wrap: wrap;
            flex-direction:row;
            justify-content: start;
        }
        .left-menu{
            width:12%;
            height: 90%;
            /*background:yellow;*/
        }
        .right-content{
            width: 85%;
            height:80%;
            margin-left: 32px;
            align-content: center;
            /*   background:blue;*/
        }
        .top-head-color{
            background-color: #50afeb ;

        }

    </style>
</head>
<body>
<%--顶部--%>
<nav class="navbar navbar-default top-head-color" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">图书馆管理系统</a>
        </div>
        <ul class="nav navbar-nav navbar-right">
            <li ><a disabled="disabled"><span class="glyphicon glyphicon-user "></span> 欢迎您，${user.name}</a></li>
            <li ><a href="${pageContext.request.contextPath}/logoutServlet"></span> 注销</a></li>
        </ul>
    </div>
</nav>
<div class="main">
    <%--    左侧菜单栏--%>
    <div class="left-menu">
        <ul class="nav nav-pills nav-stacked">
            <li ><a href="${pageContext.request.contextPath}/bookListServlet">图书管理</a></li>
            <li class="active"><a href="${pageContext.request.contextPath}/getUserList">读者管理</a></li>
            <li><a href="${pageContext.request.contextPath}/bookTypeList">图书分类管理</a></li>
            <li><a href="${pageContext.request.contextPath}/bookBorrowListServlet">图书借阅信息</a></li>
            <li><a href="${pageContext.request.contextPath}/bookAlreadyReturnedListServlet">图书归还信息</a></li>
            <li ><a href="${pageContext.request.contextPath}/bookBorrowReturnedHistoryListServlet">查询图书日志</a></li>
        </ul>
    </div>
    <%--    <div style="background-color: #9d9d9d;width: 0.5px;height: 90%"></div>--%>
    <%--    右侧--%>
    <div class="right-content">
        <div class="col-lg-3 form-group">
            <button type="button" class="btn btn-primary" id="btn_add" data-toggle="modal" data-target="#addModal">添加读者</button>
        </div>

        <table class="table table-bordered table-hover">
            <thead>
            <tr>
                <th>账号</th>
                <th>姓名</th>
                <th>邮箱</th>
                <th>手机号</th>
                <th>当前借阅数</th>
                <th>历史借阅数</th>
                <th>可借阅天数</th>
                <th>最大可借数</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <c:forEach items="${userList}" var="user" varStatus="status">
                <tr>
                    <td>${user.username}</td>
                    <td>${user.name}</td>
                    <td>${user.email}</td>
                    <td>${user.phone}</td>
                    <td>1</td>
                    <td>1</td>
                    <td>${user.lend_num}</td>
                    <td>${user.max_num}</td>
                    <td>
                        <button type="button" class="btn btn-warning btn-xs" data-toggle="modal" data-target="#updateModal"
                                onclick="showReadUser('${user.aid}','${user.username}','${user.name}','${user.email}','${user.phone}','${user.password}','${user.lend_num}','${user.max_num}')"
                                id="btn_update" >修改</button>
                        <button type="button" class="btn btn-danger btn-xs" onclick="deleteUserById('${user.aid}')">删除</button>
                    </td>
                </tr>
            </c:forEach>
            </tbody>
        </table>
    </div>

</div>


<!-- 修改模态框（Modal） -->
<form class="form-horizontal" method="post" action="${pageContext.request.contextPath}/updateReadUserServlet">   <!--保证样式水平不混乱-->
    <div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="updateModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="updateModalLabel">
                        修改读者信息
                    </h4>
                </div>
                <div class="modal-body">

                    <!---------------------表单-------------------->

                    <div class="form-group">
                        <label  class="col-sm-3 control-label">账号</label>
                        <div class="col-sm-7">
                            <input type="hidden" id="updateaid" name="aid">
                            <input type="text" class="form-control" id="updateusername" name="username"  placeholder="">

                        </div>
                    </div>


                    <div class="form-group">
                        <label   class="col-sm-3 control-label">姓名</label>
                        <div class="col-sm-7">
                            <input type="text" class="form-control" id="updatename" name="name"  placeholder="">

                        </div>
                    </div>

                    <div class="form-group">
                        <label   class="col-sm-3 control-label">邮箱</label>
                        <div class="col-sm-7">
                            <input type="text" class="form-control" id="updateemail" name="email" placeholder="">

                        </div>
                    </div>


                    <div class="form-group">
                        <label  class="col-sm-3 control-label">手机号</label>
                        <div class="col-sm-7">
                            <input type="text" class="form-control" id="updatephone" name="phone"  placeholder="">
                        </div>
                    </div>
                    <div class="form-group">
                        <label  class="col-sm-3 control-label">密码</label>
                        <div class="col-sm-7">
                            <input type="text" class="form-control" id="updatepassword" name="password"  placeholder="">
                        </div>
                    </div>
                    <div class="form-group">
                        <label   class="col-sm-3 control-label">可借阅天数</label>
                        <div class="col-sm-7">
                            <input type="text" class="form-control" id="updatelend_num" name="lend_num"  placeholder="">

                        </div>
                    </div>
                    <div class="form-group">
                        <label   class="col-sm-3 control-label">最大借阅数</label>
                        <div class="col-sm-7">
                            <input type="text" class="form-control" id="updatemax_num" name="max_num"  placeholder="">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                    </button>
                    <button type="submit" class="btn btn-primary" >
                        修改
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>

</form>
<!-------------------------------------------------------------->


<!--------------------------------------添加的弹框------------------------>
<  <form class="form-horizontal" method="post" action="${pageContext.request.contextPath}/addReadUserServlet">   <!--保证样式水平不混乱-->
    <!-- 模态框（Modal） -->
    <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        添加新读者
                    </h4>
                </div>
                <div class="modal-body">

                    <!---------------------表单-------------------->

                    <div class="form-group">
                        <label  class="col-sm-3 control-label">账号</label>
                        <div class="col-sm-7">
                            <input type="text" class="form-control" name="username" id="addusername" required="required" placeholder="请输入账号">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-3 control-label">姓名</label>
                        <div class="col-sm-7">
                            <input type="text" class="form-control" name="name" id="addName" required="required"  placeholder="请输入姓名">
                        </div>
                    </div>



                    <div class="form-group">
                        <label  class="col-sm-3 control-label">邮箱</label>
                        <div class="col-sm-7">
                            <input type="text" class="form-control" name="email" id="addEmail" required="required"  placeholder="请输入邮箱">
                        </div>
                    </div>


                    <div class="form-group">
                        <label  class="col-sm-3 control-label">手机号</label>
                        <div class="col-sm-7">
                            <input type="text" class="form-control" name="phone" id="addPhone" required="required"  placeholder="请输入手机号">
                        </div>
                    </div>
                    <div class="form-group">
                        <label  class="col-sm-3 control-label">密码</label>
                        <div class="col-sm-7">
                            <input type="text" class="form-control" name="password" id="addPassword" required="required"   placeholder="请输入密码">
                        </div>
                    </div>

                    <div class="form-group">
                        <label  class="col-sm-3 control-label">可借阅天数</label>
                        <div class="col-sm-7">
                            <input type="text" class="form-control" name="lend_num" id="addLend_num" required="required"  placeholder="请输入可借阅天数">
                        </div>
                    </div>
                    <div class="form-group">
                        <label  class="col-sm-3 control-label">最大可借数</label>
                        <div class="col-sm-7">
                            <input type="text" class="form-control" name="max_num" id="addMax_num" required="required" placeholder="请输入最大可借数">
                        </div>
                    </div>


                    <!---------------------表单-------------------->
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                    </button>
                    <button type="submit" class="btn btn-primary" >
                        添加
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>

</form>

<script>
    //点击修改
    function showReadUser(aid,username,name,email,phone,password,lend_num,max_num) {
        document.getElementById("updateaid").value = aid;
        document.getElementById("updateusername").value = username;
        document.getElementById("updatename").value = name;
        document.getElementById("updateemail").value = email;
        document.getElementById("updatephone").value = phone;
        document.getElementById("updatepassword").value = password;
        document.getElementById("updatelend_num").value = lend_num;
        document.getElementById("updatemax_num").value = max_num;
    }

    //点就删除
    function deleteUserById(aid) {
        con=confirm("是否删除?");
        if(con==true){
            location.href = "${pageContext.request.contextPath}/deleteUserByIdServlet?aid="+aid;
        }
    }
</script>





</body>
</html>
